class LayoutSlider {
    constructor(loading) {
        this.doms = {
            clock: {dom:null,showWith: ['mouseSlider'],show:true,showFn(dom) {dom.css({display: 'none'});},hideFn(dom) {dom.css({display: 'none'});} },
            mouseSlider: {dom:null,show:true,showWith: ['clock'],showFn(dom) {dom.css({left: '0%'});},hideFn(dom) {dom.css({left: '100%'});}},
            cardListInner: {dom:null,show:false,showFn(dom) {dom.css({left: '0%'});},hideFn(dom) {dom.css({left: '100%'});}},
            cardListOutter: {dom:null,show:false,showFn(dom) {dom.css({left: '0%'});},hideFn(dom) {dom.css({left: '100%'});}},
        };
        this.layoutSliderContnt = null;
        this.colors = {
            sliderBackground: '#00bcd4',
            contentBackground: '#217ff3',
            // myIconBackground: '#9bffe3',
            // innerIconBackground: '#9bffe3',
            // outterIconBackground: '#9bffe3',
            // exitIconBackground: '#9bffe3',
            iconBackground:'#9bffe3',
            iconColor: '#03a9f4',
            activeIconBackground: '#62e5ff',
            activeIconColor: '#997730'
        };
        this.icons = [
            { tar: 'myIconBackground',fun: 'my',text: '主',action($this) { $this.showMy(); } },
            { tar: 'innerIconBackground',fun: 'inner',text: '内',action($this) { $this.showInner(); } },
            { tar: 'outterIconBackground',fun: 'outter',text: '外',action($this) { $this.showOutter(); } },
            { tar: 'exitIconBackground',fun: 'exit',text: '退',action($this) { $this.showBing(); }, bottom: true },
        ];
        this.init();
        this.initColor();
        this.loading = loading;
        this.list = {inner:[],outter:[]};
    }
    showMy() {
        this.toggleShow('mouseSlider')
    }
    showInner() {
        this.toggleShow('cardListInner');
    }
    showOutter() {
        this.toggleShow('cardListOutter');
    }
    showBing() {}
    _createIcon(fun,tar,text) {
        return `<div role="icon" tar="${tar}" fun="${fun}" style="cursor:pointer;width: 50px;height: 50px;background: #9ab3f5;border-radius: 50px;margin: 15px;" 
class="myIcon ui-box top-leftStart-burst-backward">
        <div class='ui-border-element' style="line-height: 50px;font-size: 30px;text-align: center;font-weight: bold;">${text}</div>
    </div>`
        // return `<div style="width: 80px;height: 80px;line-height: 80px;text-align: center;border-radius: 50px;background: antiquewhite;margin: 10px;font-size: 35px;font-weight: bolder;cursor: pointer;" fun="fun" tar="${tar}">${text}</div>`;
    }
    init() {
        let dom = `<div style="display: flex;width: 100vw;height: 100vh;padding: 20px;box-sizing: border-box;overflow: hidden;">
    <div style="width: 100px;background: #9ab3f5;height: 100%;border-radius: 10px 0 0 10px;z-index: 10;" tar="sliderBackground">
    </div>
    <div style="width: calc(100% - 100px);height: 100%;background: #e3e3e3;border-radius: 0 10px 10px 0;" tar="contentBackground">
        <div style="width: 100%;height: 100%;position: inherit;overflow:hidden;" class="layout-slider-content"></div>
    </div>
</div>`;
        $(document.head).append(`<style>
.slider-content-solt {
transition: left 1s;
}
</style>`)
        $(document.body).append($(dom));
        this.icons.forEach(icon => {
            let dom = null;
            dom = $(this._createIcon(icon.fun,icon.tar,icon.text));
            $('[tar="sliderBackground"]').append(dom);
            let action = icon.action.bind(dom[0],this);
            dom[0].onclick = () => {
                $('[role="icon"]').css({color: this.colors.iconColor,backgroundColor: this.colors.iconBackground});
                $(`[fun="${icon.fun}"]`).css({color: this.colors.activeIconColor,backgroundColor: this.colors.activeIconBackground})
                action();
            };
            if (icon.bottom) {
                let resize = (function (dom,len,sb) {
                    dom.style.marginTop = (sb.height() - len * 85) + `px`
                }).bind(null,dom[0],this.icons.length,$('[tar="sliderBackground"]'));
                DomUtils.AddOnResize(resize);
                resize();
            }

        });
        // $('[tar="sliderBackground"]').append(this._createIcon('my','我'));
        // $('[tar="sliderBackground"]').append(this._createIcon('my','他'));
        this.layoutSliderContnt = document.getElementsByClassName('layout-slider-content')[0];
        // this.cardListDom = $('div');
        // $(this.layoutSliderContnt).append(this.cardListDom);
    }
    initColor(colors) {
        if (!colors) {
            colors = this.colors;
        }
        for (let i in colors) {
            $(`[tar='${i}']`).css({backgroundColor: colors[i]});
        }
        $('[role="icon"]').css({color: colors.iconColor,backgroundColor: colors.iconBackground});
        setTimeout(() => {
            $(`[tar="myIconBackground"]`).css({color: colors.activeIconColor,backgroundColor: colors.activeIconBackground})
        },1000);
    }

    addDom(dom,name,setting,other) {
        this.doms[name].dom = $(dom);
        $(this.layoutSliderContnt).append(this.doms[name].dom);
        this.doms[name].dom[0].classList.add('slider-content-solt');
        this.doms[name].dom[0].style.position = 'absolute';
        this.doms[name].dom[0].style.marginLeft = '120px';
        this.doms[name].dom[0].style.left = '0%';
        this.doms[name].dom[0].style.width = 'calc(100vw - 145px)';
        this.doms[name].other = other;
        if (setting) {
            setting(this.doms[name].dom[0]);
        }
        this.initDom();
        return this.layoutSliderContnt;
    }
    initDom() {
        for (let i in this.doms) {
            if (this.doms[i].dom) {
                if (this.doms[i].show) {
                    this.doms[i].showFn(this.doms[i].dom);
                } else {
                    this.doms[i].hideFn(this.doms[i].dom);
                }
            }
        }
    }
    toggleShow(name) {
        if (name in this.doms) {
            if (!this.doms[name].show) {
                for (let i in this.doms) {
                    this.doms[i].hideFn(this.doms[i].dom);
                    this.doms[i].show = false;
                }
                this.doms[name].show = true;
                this.doms[name].showFn(this.doms[name].dom);
                (this.doms[name].showWith || []).forEach(sw => {
                    this.doms[sw].show = true;
                    this.doms[sw].showFn(this.doms[sw].dom);
                })
            }
        }
    }

    // 请求页面数据
    fetchPages() {
        this.loading.setLoadingText("");
        this.loading.show();
        return Requests.getPages()
            .then(ret => {
                ret.data.forEach(li => {
                    if (li.type === 'inner') {
                        this.list.inner.push(li);
                    } else {
                        this.list.outter.push(li);
                    }
                });
                return "ok";
            }).then(() => {
                if (this.doms.cardListInner.dom) {
                    let card = this.doms.cardListInner.other;
                    let createCard = card.createCard.bind(card);
                    this.list.inner.forEach(createCard);
                }
                if (this.doms.cardListOutter.dom) {
                    let card = this.doms.cardListOutter.other;
                    let createCard = card.createCard.bind(card);
                    this.list.outter.forEach(createCard);
                }
                window.loading.hide();
                return "ok";
        });
    }
}
